<!-- Microbit下载页面 -->
<link rel="stylesheet" href="/css/topicApps_add.css">
<link rel="stylesheet" href="/css/apps/microcase/allList.css">

<div class="main layui-clear">
	<div class="layui-bar">
		<div class="layui-breadcrumbs">
			<a class="home" href="/"></a>
			<i class="layui-icon">&#xe602;</i>
	  		<a href="/microcase/allList">下载中心</a>
	  		<!-- <i class="layui-icon">&#xe602;</i>
	  		<a href="/microcase/allList">Micro:bit</a> -->
		</div>
	</div>
	<div class="layui-form layui-form-pane">
		<div class="case-download">
			<span>下载中心</span>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<ul class="garde layui-clear">
					<li>
						<a href="#" class="layui-clear" onclick="searchGarde('')">
							<div class="card-list <#if gradedescribeid==''>active</#if>">
								<span class="all-checked"></span>
								<span class="class-title">全部</span>
								<span class="<#if gradedescribeid==''>layui-show<#else>layui-hide</#if>">
									<span class="check-tip-img"></span>
								</span>
							</div>
						</a>
					</li>
					<#if dictgread??>
						<#list dictgread?reverse as grade>
							<li>
								<a href="#" onclick="searchGarde('${grade.id!''}')">
									<div class="card-list <#if gradedescribeid?? && gradedescribeid == grade.id>active</#if>">
				        			    	<img src="/${grade.fileurl!''}"  onerror="this.src='/images/user/default.jpg';this.onerror=null" alt="">
				        			    	<span class="class-title">${grade.label!''}</span>
											<span class="<#if gradedescribeid?? && gradedescribeid == grade.id>layui-show<#else>layui-hide</#if>">
											<span class="check-tip-img"></span></span>
									</div>
								</a>
							</li>
						</#list>
					</#if>
				</ul>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="screen">
					<span>
						<span>筛选:</span>
			      		<a href="#" class="<#if charge == ''>active</#if>" onclick="searchGarde('${gradedescribeid!''}','')">全部</a><span class="cut-off">/</span>
						<a href="#" class="color <#if charge == '1'>active</#if>" onclick="searchGarde('${gradedescribeid!''}','1')">免费</a><span class="cut-off">/</span>
						<a href="#" class="color <#if charge == '0'>active</#if>" onclick="searchGarde('${gradedescribeid!''}','0')">付费</a>
					</span>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<div class="synthesize-class">
					<span clas="class-f">
						<span>排序:</span>
				        <!-- <a href="#" class="active">销量</a><span class="cut-off">/</span> -->
						<!-- <a href="#" class="color  <#if orderby == 'price'>active</#if>" onclick="searchGarde('${gradedescribeid!''}','${charge!''}','price')">价格</a><span class="cut-off">/</span> -->
						<a href="#" class="color <#if orderby == 'commentnum'>active</#if>" onclick="searchGarde('${gradedescribeid!''}','${charge!''}','commentnum')">热度</a><span class="cut-off">/</span>
						<a href="#" class="color <#if orderby == 'releasetime'>active</#if>" onclick="searchGarde('${gradedescribeid!''}','${charge!''}','releasetime')">时间</a>
					</span>
					<span class="official" onclick="searchGarde('${gradedescribeid!''}','${charge!''}','0')">
				        <span class="class-s-span <#if orderby == '0'>active</#if>"></span>
				        <span class="color <#if orderby == '0'>text-active</#if>">官方</span>
					</span>
					<span  class="official" onclick="searchGarde('${gradedescribeid!''}','${charge!''}','1')">
				        <span class="class-s-span  <#if orderby == '1'>active</#if>" ></span>
				        <span class="color <#if orderby == '1'>text-active</#if>">用户</span>
					</span>
				</div>
				<div class="micro-list">
					<ul class="list-ul">
						<li class="list-li phone-case-li">
							<a href="#">
								<div class="card-list">
									<span class="layui-elip title">
									    <label class="layui-elip title-name">案例名</label>
									</span>
									<span class="layui-elip">作者</span>
									<span>售价</span>
								</div>
							</a>
						</li>
						<#if microcaseList??>
							<#list microcaseList.content as microcase>
								<li class="list-li">
									<a href="/admin/microcase/hotDetail/${microcase.id!''}.html?id=${microcase.id!''}">
										<div class="card-list">
											<span class="layui-elip title">
											    <label class="layui-elip title-name">${microcase.title!''}</label>
												<#if microcase.essencecase =="1">
													<span class="topic-tip essence"></span>
									            </#if>
											</span>
											<span class="layui-elip">${microcase.author!''}</span>
											<#if microcase.price?? && microcase.price?string('')=='0'>
												<span class="phone-price">免费</span>
											<#else>
												<span class="layui-elip red phone-price">￥&nbsp;${microcase.price?string('0.00')}</span>
											</#if>
											<span class="layui-elip phone-span-time">${microcase.releasetime?string("yyyy-MM-dd")}</span>
										</div>
									</a>
								</li>
							</#list>
						</#if>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div style="text-align: center" class="front-desk">
		<div class="laypage-main" id="pages"></div>
	</div>
</div>
<form id="Form" class="layui-hide" method="post">
	<input type="hidden" name="gradedescribe" value="${gradedescribeid!''}">
	<input type="hidden" name="charge"  value="${charge!''}">
	<input type="hidden" name="orderby"  value="${orderby!''}">
	
	<!-- 等级id -->

</form>
<script>
var list= [];
<#list microcaseList.content as list>
	list.push({"id":"${list.id!''}","title":"${list.title!''}","author":"${list.author!''}"});
</#list>
console.log(list);

layui.use(['laypage', 'layer'], function(){
	var laypage = layui.laypage;
  	laypage({
	    cont: 'pages'
	    ,first:'首页'
	    ,last:'末页'
	    ,pages: ${microcaseList.totalPages}
	    ,curr:${microcaseList.number+1}
	    ,skin: '#32c24d'
    	,skip: true
	    ,jump:function(obj, first){
	    	var curr = obj.curr;
	    	if (!first) {
               location.href = '/microcase/allList?p=' + curr + "<#if RequestParameters['q']?? && RequestParameters['q'] != ''>&q=${RequestParameters['q']}</#if>";
            }
	    }
	});
});
function searchGarde(gradedescribe,charge,orderby){
	$("#Form input[name=gradedescribe]").val(gradedescribe);
	$("#Form input[name=charge]").val(charge);
	$("#Form input[name=orderby]").val(orderby);
	$("#Form").attr("action","/microcase/allList");
	$("#Form").submit();
}

</script>